<template>
    <div class="img-uploader">
        <div class="img-uploader-img">
            <i class="iconfont">&#xe62a;</i>
            <input type="file" @change="change"/>
        </div>
        <div class="img-uploader-text">
            <div class="img-uploader-img-preview">
                <img :src="base64URL" v-if="base64URL"/>
                <span v-else="base64URL">图片预览</span>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'img-uploader',
        data() {
            return {
                base64URL: ''
            }
        },
        methods: {
            change(e) {
                let file = e.target.files[0];
                let limitedTypes = ['image/jpg', 'image/jpeg', 'image/png'];
                if (file && limitedTypes.indexOf(file.type) >= 0) {
                    this.createBase64URL(file);
                } else {
                    this.$mToast("不支持" + file.type + "文件");
                }
            },
            createBase64URL(file) {
                const self = this, reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    self.base64URL = e.target.result;
                    self.$emit('selected', e.target.result);
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .img-uploader {
        display: flex;
        background: #fff;
        .img-uploader-img {
            position: relative;
            flex-basis: 100px;
            height: 100px;
            border: 1px dashed #eee;
            i {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                font-size: 50px;
                text-align: center;
                line-height: 100px;
            }
            input {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                outline: none;
                opacity: 0;
            }
        }
        .img-uploader-text {
            flex: 1;
            .img-uploader-img-preview {
                width: 100px;
                height: 100px;
                margin-left: 15px;
                line-height: 100px;
                border: 1px dashed #eee;
                text-align: center;
                img {
                    width: 80%;
                    height: 80%;
                    vertical-align: middle;
                }
                span {
                    font-size: 16px;
                    color: gray;
                }
            }
        }
    }
</style>